<template>
  <div id="app">
    <!--  背景地图 -->
    <!-- <img class="BeiJing" src="../../img/首页/地图.jpg" alt="" /> -->
    <div class="Map">
      <MapcompVue  :flag="false"  :adds="List"  v-if="List.length !== 0" ></MapcompVue>
    </div>
    <span class="Exit" @click="router.go(-1)"
      ><van-icon name="arrow-left"
    /></span>
    <!-- 附近门店选择 -->
    <div class="nearby">
      <span>附近共 {{ num }} 家门店</span>
      <ul>
        <li v-for="item in List" :key="item">
          <img :src="item.logo" alt="" />
          <div class="count">
            <div>
              <span>{{ item.sname }}</span>
              <span> <span>20分钟</span><span>1.8km</span> </span>
            </div>
            <span>{{ item.position }}</span> <br />
            <span class="Span">{{ item.status }}</span>
            <span class="Span" v-show="item.isnew != undefined">{{
              item.isnew
            }}</span>
          </div>
        </li>
      </ul>
      <!-- 敬请期待 -->
      <div class="QiDai">
        <span>更多门店拓展中~</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
// 导入 上门回收请求
import { storeList } from "../../api/index.js";
// 引入地图
import InitMapVue from "../../components/InitMap.vue";
import MapcompVue from "../../components/Mapcomp.vue";
const num = ref();
const router = useRouter();

const List = ref([
]);
// 上门回收数据请求
storeList()
  .then((res) => {
    List.value = res.data.data.data;
    num.value = List.value.length;
    // console.log(List.value);
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
</script>

<style lang="less" scoped>
.BeiJing {
  width: 100%;
  height: 100vh;
}
.Map {
  width: 380px;
  height: 200px;
}
.Exit {
  z-index: 5;
  font-weight: 800;
  background-color: rgba(43, 205, 221, 1);
  position: absolute;
  top: 2.667vw;
  left: 2.667vw;
  color: #ffffff;
  padding: 2vw 2.667vw;
  border-radius: 50%;
}
.nearby {
  border-top-left-radius: 3.667vw;
  border-top-right-radius: 3.667vw;
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  padding-top: 4vw;
  padding-bottom: 14vw;
  background-color: #ffffff;
  width: 100%;
  position: absolute;
  top: 200px;
  left: 0;
  > span {
    display: inline-block;
    margin-left: 4vw;
    padding-left: 2vw;
    font-size: 4.667vw;
    font-weight: 700;
    border-left: 1vw solid red;
    margin-bottom: 6.667vw;
  }
  ul {
    li {
      margin-right: 4vw;
      margin-bottom: 20px;
      padding-bottom: 2.667vw;
      border-bottom: 0.167vw solid rgba(128, 128, 128, 0.5);
      margin-left: 4vw;
      display: flex;
      img {
        display: block;
        width: 20.667vw;
        height: 20.667vw;
        border-radius: 1.333vw;
      }
      .count {
        margin-left: 1.333vw;
        div {
          margin-bottom: 1.333vw;
          width: 100%;
          span:nth-of-type(1) {
            font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
            font-weight: 700;
            font-style: normal;
            font-size: 14px;
            text-align: left;
          }
          span:nth-of-type(2) {
            span {
              font-family: "微软雅黑";
              font-weight: 400;
              font-style: normal;
              font-size: 12px;
              color: #cccccc;
              text-align: right;
              width: 10.667vw;
            }
            span:nth-of-type(1) {
              position: absolute;
              right: 18.667vw;
            }
            span:nth-of-type(2) {
              position: absolute;
              right: 6.667vw;
            }
          }
        }
        span:nth-of-type(1) {
          display: inline-block;
          font-family: "微软雅黑";
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          text-align: left;
          margin-bottom: 1.833vw;
        }
        .Span:nth-of-type(3) {
          font-family: "Arial Normal", "Arial";
          font-weight: 400;
          font-style: normal;
          text-align: center;
          line-height: normal;
          font-size: 12px;
          color: #ffffff;
          background-color: rgba(255, 94, 129, 1);
          padding: 0.833vw 2.667vw;
          border-radius: 1.333vw;
          margin-right: 10px;
        }
        .Span:nth-of-type(2) {
          font-family: "Arial Normal", "Arial";
          font-weight: 400;
          font-style: normal;
          text-align: center;
          line-height: normal;
          font-size: 12px;
          color: #ffffff;
          background-color: rgba(255, 193, 45, 1);
          padding: 0.833vw 2.667vw;
          border-radius: 1.333vw;
          margin-right: 10px;
        }
      }
    }
  }
  .QiDai {
    width: 120px;
    margin: 0 auto;
    span {
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      color: #cccccc;
      line-height: 16px;
    }
  }
}
</style>
